<template>
    <div>

        
        <page-container 
        :header-ceiling="pageConfig.header.ceiling"
        :header-ceiling-color="pageConfig.header.ceilingColor"
        :header-regular="pageConfig.header.regular"
        :header-color="pageConfig.header.background"
        :footer-regular="pageConfig.footer.regular"
        :footer-color="pageConfig.footer.background"
        >
            <template  v-slot:content>
                <mask-image :url="backImage" :height="500">
                    <template>
                        <div class="mask-iamge-text">
                            <section-title title="全站搜索" size="max"></section-title>
                        </div>
                        
                    </template>
                </mask-image>
               
                <div class="search-mian">
                
                    
                    <div class="serach-body" >
                        <div class="search-data" >
                            <div v-show="dataList.length==0" style="min-height: 120vh;display: flex;align-items: center;justify-content: center;">
                                <el-empty description="暂无结果~"></el-empty>
                            </div>
                            <data-list :data-list="dataList" row="true" v-show="dataList.length>0"></data-list>
                            <div class="data-page">
                                <el-pagination
                                @size-change="changeSize"
                                @current-change="changeCurrent"
                                :current-page="page.current"
                                :page-sizes="page.config.set"
                                :page-size="page.size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="page.total">
                                </el-pagination>
                            </div>
                        </div>
                        <div class="srarch-ability">
                            <div class="search-form">
                                <el-form  :model="search"  >
                                <el-form-item>
                                    <div class="search-form-item">
                                        <div class="search-input">
                                            <el-input v-model="search.value" placeholder="请输入要搜索的内容..."/>
                                        </div>
                                        
                                        <div class="search-btn" @click="searchHandler">
                                            <i class="el-icon-search"></i>
                                        </div>
                                    </div>
                                    
                                </el-form-item>
                                
                                </el-form>
                            </div>
                            <div>
                                <section-title title="热门"></section-title>
                                <card-list :data-list="cardList" @handler="gotoHot" @more="showMoreHot"></card-list>

                            </div>
                            
                            <div>
                                <section-title title="分类"></section-title>
                                <classify-list :data-list="classifyList" @handler="gotoClassify" @more="showMoreClassify"></classify-list>
                            </div>
                            
                            
                            

                        </div>
                    </div>
                   
                </div>
            </template>
       </page-container>

    </div>
</template>

<script>

import PageContainer from '@/components/container/page-container/PageContainer';
import DataList from '@/components/plugs/data-list/DataList';
import SectionTitle from '@/components/plugs/section-title/SectionTitle';

import ClassifyList from '@/components/plugs/classify-list/ClassifyList';
import CardList from '@/components/plugs/card-list/CardList';

import MaskImage from '@/components/plugs/mask-image/MaskImage';


export default {

    data(){
        return{
            pageConfig:{
                header:{
                    regular:true,
                    ceiling:true,
                    background:'transparent',
                    ceilingColor:'#1E171F'
                },
                footer:{
                    regular:true,
                    background:'#1E171F'
                }
            },
            backImage:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-about.jpg',
            search:{

            },
            dataList:[
                {
                    title:'测试标题1111',
                    cover:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5320661bc7984b34a423cae92f86e95b~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?',
                    abstract:'这是一个测试的简介4654654'
                },
                {
                    title:'测试标题2222',
                    cover:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5320661bc7984b34a423cae92f86e95b~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?',
                    abstract:'daljdklajlk1测试哦离开了了解到了卡机了'
                },
                {
                    title:'测试标题3333',
                    cover:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5320661bc7984b34a423cae92f86e95b~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?',
                    abstract:'daljdklajlk1测试哦离开了了解到了卡机了'
                },
                {
                    title:'测试标题444',
                    cover:'https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5320661bc7984b34a423cae92f86e95b~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?',
                    abstract:'daljdklajlk1测试哦离开了了解到了卡机了'
                }
                
            ],
            classifyList:[
                {name:'Java',num:56},
                {name:'Vue',num:53},
                {name:'MySQL',num:99},
                {name:'Docker',num:65},
                {name:'Redis',num:62}
            ],
            cardList:[
                {cover:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/popular-post-bg.jpg',title:'测试内容1111111'},
                {cover:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/popular-post-bg.jpg',title:'测试内容2222222'},
                {cover:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/popular-post-bg.jpg',title:'测试内容3333333'},
                {cover:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/popular-post-bg.jpg',title:'测试内容4444444'},
                {cover:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/popular-post-bg.jpg',title:'测试内容5555555'}
            ],
            page:{
                total:400,
                size:10,
                current:1,
                records:[],
                config:{
                    set:[10,20,30,40]
                }

            }
        }
    },
    methods:{
        gotoClassify(index,data){
            console.log('index',index);
            console.log('data',data);
        },
        gotoHot(index,data){
            console.log('index',index);
            console.log('data',data);
        },
        showMoreClassify(){
            console.log('查看更多分类');
        },
        showMoreHot(){
            console.log('查看更多热门');
        },
        changeSize(e){
            console.log(`每页显示条数${e}`);
            this.getPage();

        },
        changeCurrent(e){
            console.log(`当前页${e}`);
            this.getPage();
        },
        getPage(){

        },
        searchHandler(){
            if(!this.search.value||this.search.value==null||this.search.value==''){
                this.$message.error('搜索的内容不能为空~');
                return;
            }
            this.getPage();
        }
        


    },
    components:{
        'page-container':PageContainer,
        'data-list':DataList,
        'section-title':SectionTitle,
        'classify-list':ClassifyList,
        'card-list':CardList,
        'mask-image':MaskImage
    }

}
</script>

<style scoped>
.mask-iamge-text{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
.search-mian{
    width: 100%;
    display: flex;
    justify-content: center;

}
.search-form{
    width: 100%;
    height: 120px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.search-form>>>form{
    width: 100%;
}
.serach-body{
    display: flex;
    justify-content: space-between;
    width: 1200px;
}
.search-data{
    padding-top: 80px;
    width: 60%;
}
.srarch-ability{
    width: 30%;
    /* margin: 0 auto; */
    padding-bottom: 20px;
}
.search-form-item{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dcdfe6;
}
.search-btn{
   width: 20%;
    height: 50px;
    /* margin:  0 auto; */
    text-align: center;
    font-weight: 600;
    color: #FF6900;
    font-size: 20px;
    line-height: 50px;
    
}
.search-btn:hover{
    cursor: pointer;
}
.search-input>>>input{
    border: 0;

}
.search-input{
    width: 80%;
}
.data-page{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 40px;
    animation: fadeInUp 1s;
}

</style>